<template>
    <div>
        <div class="test_page_container" v-if="loading">
            <div class="left_container_cloud">
                <div class="left_container_cloud_title">
                    <div class="toolbar">
                        <div class="title_left">
                            <h2>{{ option.title }}</h2>
                        </div>
                        <div class="right_tools">
                        </div>
                    </div>
                </div>
                <div class="static_view" style="padding-top: 50px;">
                    <viewerCom :url="url" v-if="url && flag" />
                    <div class="preview" v-else>{{ preview }}</div>
                </div>
            </div>
            <div class="right_container_cloud" :class="{ 'miniWith': miniWidth, 'maxWith': !miniWidth }">
                <div class="right_content">
                    <i class="fixedIcon" :class="{ 'el-icon-caret-right': !miniWidth, 'el-icon-caret-left': miniWidth }"
                        @click="changeWidth"></i>
                    <div v-show="!miniWidth" class="content">
                        <el-tabs v-model.trim="activeName">
                            <el-tab-pane name="uploadInfo">
                                <div slot="label" style="font-size: 16px;">
                                    <span>文件上传</span>
                                </div>
                                <fileUpload :option="option" v-on="$listeners" v-bind="$attrs" @submitDraw="submitDraw"
                                    :pageCode="pageCode" @groupChange="groupChange" @group="groupFunction"
                                    @group2="groupFunction2" @changeGroupList="groupFunction" @changeStatus="changeStatus"
                                    @changeGroup2Status="changeGroup2Status" @changeGroupStatus="changeGroupStatus"
                                    @changeData1="changeData1" @groupY="groupFunctionY" @group2Y="groupFunction2Y" />
                            </el-tab-pane>

                            <el-tab-pane name="chartInfo" :disabled="activeName !== 'chartInfo'">
                                <div slot="label" style="font-size: 16px;">
                                    <span>图表调整</span>
                                </div>
                                <chartConfig v-on="$listeners" v-bind="$attrs" :option="option" @updateDraw="updateDraw"
                                    @colorList="colorList" :defalutValue="value" :flag="flag" />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="dialogVisible" :width="dialogWidth" class="error" v-dialogDrag>
            <div v-html="error"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" v-copy="command" v-if="command">复制路径</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import fileUpload from './fileUpload'
import chartConfig from './chartConfig'
import { getPageSettingRequest, testDrawRequest } from '@/api/tools'
import { deepClone } from '@/utils';
export default {
    components: {
        fileUpload, chartConfig
    },
    name: 'GenecloudUiIndex',

    data() {
        return {
            loading: false,
            miniWidth: false,
            activeName: 'uploadInfo',
            tools: null,
            option: {},
            pageCode: null,
            preview: '请调整右侧参数,开始绘图...', // 绘图中，请等待...
            flag: true,
            url: '',
            queryParams: {},
            value: null,
            dialogVisible: false,
            error: null,
            command: null,
            title: null,
            dialogWidth: '500px'
        };
    },
    mounted() {

    },
    created() {
        this.pageCode = this.$queryToObjectsearch(window.location.search).pageCode
        this.getList()
    },
    methods: {
        async getList() {
            const res = await getPageSettingRequest({ pageCode: this.pageCode })
            if (res.code !== 200) return this.$message.error(res.message)
            this.option = res.data
            if (this.option.legendConfig.length) {
                let item = this.option.legendConfig[0].config.find(item => item.type == 'colorMultiple')
                if (item) {
                    this.value = this.option.form[item.prop]
                }
            }
            this.option.mutualExclusionOptions = res.data.group.dataGroupList.reduce((pre, item, index) => {
                if (item.ischecked) {
                    pre.push({
                        value: index,
                        label: item.groupTitle
                    })
                }
                return pre
            }, [])
            this.queryParams.group = this.option.group
            this.queryParams.group2 = this.option.group2
            this.queryParams.groupY = this.option.groupY
            this.queryParams.group2Y = this.option.group2Y
            this.queryParams.yIsGroup = this.option.yIsGroup
            this.isGroupValue(res.data.initialIsGroup)
            this.url = res.data.url || ''
            this.loading = true
        },
        isGroupValue(initialIsGroup) {
            if (initialIsGroup.length > 1) {
                this.queryParams.isGroup = 1
                this.option.isGroup = 1
            } else if (initialIsGroup.length === 1 && initialIsGroup.includes('是')) {
                this.option.isGroup = 1
                this.queryParams.isGroup = 1
            } else if (initialIsGroup.length === 1 && initialIsGroup.includes('否')) {
                this.option.isGroup = 0
                this.queryParams.isGroup = 0
            } else {
                this.queryParams.isGroup = null
                this.option.isGroup = 0
            }
        },
        changeWidth() {
            this.miniWidth = !this.miniWidth
        },
        submitDraw(activeName) {
            this.activeName = activeName
        },
        //开始测试
        async updateDraw(form, list) {
            this.flag = false
            this.preview = '绘图中，请等待...'
            this.queryParams.cloudPictureCode = this.pageCode
            this.queryParams.chartSetting = form
            if (list) {
                this.queryParams.colorGroupList = list
            }
            const res = await testDrawRequest(JSON.stringify(this.queryParams))
            if (res.code !== 200) {
                this.preview = '请调整右侧参数,开始绘图...'
                this.error = res.data.error
                this.command = res.data.command
                this.title = '错误'
                this.dialogVisible = true
                this.flag = true
            } else {
                this.flag = true
                this.url = res.data.url
                this.$message({
                    type: 'success',
                    message: '任务运行成功！'
                })
            }
        },
        colorList(value) {
            this.queryParams = {
                ...this.queryParams,
                colorGroupList: value
            }
        },
        groupChange(value) {
            this.option.colorGroupList = deepClone(value)
        },
        groupFunction({ dataGroupList, sampleList }) {
            let num = -1
            this.option.mutualExclusionOptions = dataGroupList.reduce((pre, item, index) => {
                if (item.ischecked) {
                    num++
                    pre.push({
                        value: num,
                        label: item.groupTitle
                    })
                }
                return pre
            }, [])
            this.queryParams = { ...this.queryParams, group: { dataGroupList, sampleList } }
        },
        groupFunctionY({ dataGroupList, sampleList }) {
            this.queryParams = { ...this.queryParams, groupY: { dataGroupList, sampleList } }
            this.option.groupY = deepClone({ dataGroupList, sampleList })
        },
        groupFunction2Y(group2Y) {
            this.queryParams = { ...this.queryParams, group2Y }
            this.option.group2Y = deepClone(group2Y)
        },
        groupFunction2(group2) {
            this.queryParams = { ...this.queryParams, group2 }
        },
        changeStatus(value) {
            let num = -1
            this.option.mutualExclusionOptions = value.reduce((pre, item, index) => {
                if (item.ischecked) {
                    num++
                    pre.push({
                        value: num,
                        label: item.groupTitle
                    })
                }
                return pre
            }, [])
            this.queryParams.group.dataGroupList = value
        },
        changeGroupStatus(value) {
            this.queryParams.isGroup = value
        },
        changeGroup2Status(value) {
            this.queryParams.group2 = value
        },
        changeData1(list) {
            this.option.groupY = deepClone(list)
            this.queryParams.groupY = deepClone(list)
        },
        changeData2(value) {
            this.option.group2Y = deepClone(value)
            this.queryParams.group2Y = deepClone(value)
        },
        changeGroupYStatus(value) {
            this.queryParams.yIsGroup = value
        }
    },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;

    // background-color: red;
    .title_left {
        display: flex;
        align-items: center;
    }
}

.right_tools {
    display: flex;

    .el-dropdown-link {
        cursor: pointer;
        margin-right: 15px;
        display: block;
        color: #666;
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 18px;
        background-color: #f0f0f0;
        border-radius: 2px;
    }

    .el-change-link {
        cursor: pointer;
        display: block;
        color: #666;
        height: 32px;
        padding: 0 6px;
        line-height: 32px;
        margin-right: 15px;
        background-color: #f0f0f0;
    }

}

.test_page_container {
    padding-left: 1%;
    padding-top: 10px;
    width: 98%;
    display: flex;
    justify-content: space-between;
    min-height: calc(100vh - 20px);

    .left_container_cloud {
        position: relative;
        width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        // height: 100%;
        background-color: #fff;
        border-radius: $themeSize;
        box-shadow: 2px 2px 5px 2px #ccc;
        padding: 15px 25px 0;

        .left_container_cloud_title {
            border-bottom: 1px solid #ccc;
        }

        .left_container_cloud_main {
            flex: 1;
            padding: 25px 0;

            #echartsList {
                position: relative;
                height: 100%;

                // background-color: red;
                #echarts {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .static_view {
            width: 100%;
            height: 100%;
            overflow-x: auto;
            // background-color: red;
            margin-top: 40px;
            text-align: center;
            cursor: zoom-in;

            // background-color: red;
            // background-color: red;
            // width: 800px;
            .preview {
                font-size: 18px;
                font-weight: 700;
            }
        }
    }

    .right_container_cloud {
        position: relative;

        width: 500px;
        background-color: #fff;
        border-radius: $themeSize;
        // overflow-y: auto;
        margin-left: 10px;
        // height: calc(100vh - 160px);
        box-shadow: 2px 2px 5px 2px #ccc;

        .right_content {
            padding: 15px 22px 0;
            // background-color: red;
            // position: relative;
            height: calc(100vh - 50px);
            max-height: calc(100vh - 50px);
            overflow-y: auto;
        }
    }

    .miniWith {
        width: 20px !important;
        transition: all 0.5s;
    }

    .maxWith {
        width: 30% !important;
        transition: all 0.5s;
    }

    .fixedIcon {
        position: absolute;
        top: 45%;
        left: 0;
        cursor: pointer;
        width: 15px;
        height: 35px;
        line-height: 35px;
        border-radius: 3px;
        background-color: #dddddd;
    }
}

.error {
    ::v-deep .el-dialog__title {
        color: red;
    }
}
</style>